<template>
  <div class="cbox">
      {{fmsg}}
      <button @click="sendMsgToParent">发送到父组件</button>
  </div>
</template>

<script>
/**
 * 子组件传递数据到父组件的步骤
 * 1、在子组件中触发事件，在事件处理函数中通过调用vue实例中的$emit方法来实现从子组件向父组件传值
 * $emit(参数1，参数2)
 * 参数1：自定义事件名称
 * 参数2：要传递的数据
 * 2、在父组件的template模板的引用子组件的开始标签中使用@自定义事件="回调函数"来接收自定义事件
 * <child :fmsg="fmsg" @giles="getMsgFromChild"></child>
 * 3、在父组件的接收子组件的方法中，将形参的局部变量赋值给父组件中的某个data中的变量，为了让template模板访问到
 */
export default {
    props:{
        fmsg:{
            type:String
        }
    },
    data(){
        return{
            cmsg:'儿子的信息到父亲'
        }
    },
    methods:{
        sendMsgToParent(){
           this.$emit('giles',this.cmsg)
        }
    }

}
</script>

<style lang="scss">
    .cbox{
        width: 100px;
        height: 100px;
        background-color: springgreen;
    }
</style>